<template>
<el-drawer :title="drawer.title" :visible.sync="drawer.visible" direction="rtl" custom-class="drawer-right-side" :before-close="closeDrawer">
    <el-form ref="ruleForm" class="ruleForm" :model="ruleForm" :rules="rules" label-position="top" label-width="100px">
        <el-form-item label="角色名称:" prop="title">
            <el-input v-model="ruleForm.title" clearable autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item label="权限">
            <el-tree show-checkbox ref="tree" :data="treeData" node-key="id" :expand-on-click-node="false" highlight-current :check-strictly="true" :default-checked-keys="treeChecked" :default-expanded-keys="treeChecked" :props="{ label: 'title' }">
            </el-tree>
        </el-form-item>

        <el-form-item label="是否可删除">
            <el-radio-group v-model="ruleForm.delable">
              <el-radio :label="1">可删除</el-radio>
              <el-radio :label="0">不删除</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="排序:">
            <el-input v-model="ruleForm.sort" clearable autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submit">确定提交</el-button>
        </el-form-item>
    </el-form>
</el-drawer>
</template>

<script>
import {
    readRoleApi,
    saveRoleApi,
    createRoleApi
} from "@/api/auth/role";

import {
    getNodeTreeApi
} from "@/api/auth/node";

const ruleForm = {
    id: "",
    title: "",
    pc: [],
    sort: 0,
    delable: 0
};

export default {
    name: "editName",
    data() {
        return {
            drawer: {
                title: "",
                visible: false,
                type: "",
            },
            treeData: [],
            treeChecked: [],
            ruleForm: ruleForm,
            rules: {
                title: [{
                    required: true,
                    message: "请输入角色名称",
                    trigger: "blur",
                }, ],
            },
        };
    },
    created() {
        this.getNodeTree();
    },
    methods: {
        // 获取列表信息
        getNodeTree() {
            getNodeTreeApi({}).then((res) => {
                if (res.code == 200) {
                    this.treeData = res.data.tree;
                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
        // 显示
        showDialog(type, data) {
            if (type == "create") {
                this.drawer.title = "创建角色";
                this.drawer.type = "create";
                this.ruleForm = Object.assign({}, ruleForm);
            } else {
                this.drawer.title = "编辑角色";
                this.drawer.type = "edit";
                readRoleApi(data).then(res => {
                    this.ruleForm = Object.assign({}, res.data.detail);
                    // this.$refs['tree'].setCheckedKeys(this.ruleForm.pc);
                    this.ruleForm.pc = res.data.detail.pc;
                    this.treeChecked = this.ruleForm.pc;
                });
            }
            this.drawer.visible = true;
        },
        // 关闭
        closeDrawer() {
            this.drawer.visible = false;
            this.resetDialog();
        },
        // 重置表单
        resetDialog() {
            this.ruleForm = {
                title: "",
                id: 0,
                sort: 0,
            };
            this.$refs["ruleForm"].resetFields();
        },

        // 提交
        submit() {
            let params = this.ruleForm;
            params.pc = this.$refs['tree'].getCheckedKeys();
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    if (this.drawer.type == "create") {
                        createRoleApi(params).then((res) => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.closeDrawer();
                                this.$emit("getTableList");
                            } else {
                                this.$message.warning(res.msg);
                            }
                        });
                    } else {
                        saveRoleApi(params).then((res) => {
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.closeDrawer();
                                this.$emit("getTableList");
                            } else {
                                this.$message.warning(res.msg);
                            }
                        });
                    }
                } else {
                    return false;
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>
